Menampilkan Gambar HTML
Tutorial HTML; Diperbarui tanggal: 9/09/2025Untuk menampilkan gambar dengan HTML kita dapat menggunakan tag <img>
dan atribut src
contoh penggunaanya adalah sebagai berikut:
<img src="peta_indonesia.jpg" alt="Peta Indonesia">
Atribut src
berisi lokasi gambar yang akan ditampilkan sedangkan nilai pada atribut alt
akan ditampilkan sebelum atau ketika gambar gagal dimuat.
Mengubah Ukuran Gambar
Untuk mengubah ukuran gambar kita dapat menggunakan atribut width
untuk lebar dan height
untuk tinggi. Contoh penggunaannya yaitu:
<img src="peta_indonesia.jpg" alt="Peta Indonesia" width='100' height='200'>
Kode diatas akan menampilkan gambar dengan ukurang lebar 100 pixel dan tinggi 200 pixel.
Selain melalui cara di atas, kita juga dapat mengatur lebar dan tinggi gambar dengan CSS dengan menambahkan atribut style
. Contoh:
<img src="peta_indonesia.jpg" alt="Peta Indonesia" style="width:'100px'; height:'200px'">
Tata Letak Gambar
Untuk mangatur tata letak gambar apakah disamping kiri atau kanan teks kita dapat menggunakan property CSS float
pada gambar. Contoh:
<img src="peta_indonesia.jpg" alt="Peta Indonesia" style="width:'100px'; height:'200px'; float:left">
Kode diatas akan menempatkan gambar disebelah kiri dari teks.